<template>
  <header class="shadow-sm sticky top-0 z-50 bg-[rgba(0,0,0,0.9)]">
    <nav class="container-custom">
      <div class="flex justify-between items-center h-16">
        <!-- Logo -->
        <NuxtLink to="/" class="flex items-center space-x-2">
          <div class="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center">
            <span class="text-white font-bold text-lg">L</span>
          </div>
          <span class="text-xl font-bold text-white">乐在</span>
        </NuxtLink>

        <!-- 桌面端导航 -->
        <!-- <div class="hidden md:flex items-center space-x-8">
          <a 
            v-for="item in navigationItems" 
            :key="item.name"
            :href="item.href"
            @click.prevent="scrollToSection(item.href)"
            class="transition-colors duration-200 font-medium cursor-pointer"
            :class="item.href === activeHash ? 'text-primary-600' : 'text-gray-700 hover:text-primary-600'"
          >
            {{ item.name }}
          </a>
          <a href="#contact" @click.prevent="scrollToSection('#contact')" class="btn-primary">
            联系我们
          </a>
        </div> -->

        <!-- 移动端菜单按钮 -->
        <button 
          @click="toggleMobileMenu"
          class="p-2 rounded-md text-[#ef4136] hover:text-primary-600 hover:bg-gray-100"
        >
          <svg class="w-6 h-6" fill="#ef4136" stroke="currentColor" viewBox="0 0 24 24">
            <path v-if="!isMobileMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            <path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <!-- 移动端菜单 -->
      <div v-if="isMobileMenuOpen" class="md:hidden border-t border-gray-200 py-4">
        <div class="flex flex-col space-y-4">
          <a 
            v-for="item in navigationItems" 
            :key="item.name"
            :href="item.href"
            @click.prevent="handleMobileClick(item.href)"
            class="transition-colors duration-200 font-medium"
            :class="item.href === activeHash ? 'text-primary-600' : 'text-gray-700 hover:text-primary-600'"
          >
            {{ item.name }}
          </a>
          <a href="#contact" @click.prevent="handleMobileClick('#contact')" class="btn-primary w-full mt-4">
            联系我们
          </a>
        </div>
      </div>
    </nav>
  </header>
</template>

<script setup>
const isMobileMenuOpen = ref(false)
const activeHash = ref('#about')

const navigationItems = [
  { name: '关于我们', href: '#about' },
  { name: '能做什么', href: '#services' },
  { name: '案例展示', href: '#cases' },
  { name: '精英团队', href: '#team' },
  { name: '合作伙伴', href: '#partners' },
  { name: '联系我们', href: '#contact' }
]

const toggleMobileMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value
}

const closeMobileMenu = () => {
  isMobileMenuOpen.value = false
}

const scrollToSection = (hash) => {
  if (process.client) {
    const id = hash.replace('#', '')
    const target = document.getElementById(id)
    if (target) {
      target.scrollIntoView({ behavior: 'smooth', block: 'start' })
    }
  }
}

const handleMobileClick = (hash) => {
  scrollToSection(hash)
  closeMobileMenu()
}

// ScrollSpy：根据滚动位置高亮当前导航
const updateActiveHash = () => {
  if (!process.client) return
  const ids = navigationItems.map(i => i.href.replace('#', ''))
  const offset = 100
  let current = ids[0]
  for (const id of ids) {
    const el = document.getElementById(id)
    if (!el) continue
    const top = el.getBoundingClientRect().top
    if (top - offset <= 0) {
      current = id
    } else {
      break
    }
  }
  activeHash.value = `#${current}`
}

onMounted(() => {
  if (!process.client) return
  updateActiveHash()
  window.addEventListener('scroll', updateActiveHash, { passive: true })
  window.addEventListener('resize', updateActiveHash)
})

onBeforeUnmount(() => {
  if (!process.client) return
  window.removeEventListener('scroll', updateActiveHash)
  window.removeEventListener('resize', updateActiveHash)
})
</script>
